<!-- 组件 -->
<template>
  <div class="sku-ptions">
    <div class="sku-show">
      <div class="show-img">
        <img :src="showImage" alt="图片不见了" />
      </div>
      <div>
        <div class="show-price">{{ showPrice }}</div>
        <div class="show-stock">库存{{ showStock }}件</div>
        <div class="show-selected" v-html="showSelected"></div>
      </div>
    </div>
    <div
      class="sku-props-values"
      v-for="(item, index) in skuInfo.props"
      :key="index"
    >
      <p class="sku-props">{{ item.name }}</p>
      <ul class="sku-value">
        <li
          v-for="(i, k) in item.values"
          :key="k"
          :class="{ active: selected[item.pid].vid == i.vid }"
          @click="
            selectedValue({
              props: item.name,
              pid: item.pid,
              value: i.name,
              vid: i.vid
            })
          "
        >
          {{ i.name }}
        </li>
      </ul>
    </div>
    <div class="sku-num">
      <p>数量</p>
      <counter
        style="width: 120px;height: 28px;"
        :defaultNum="1"
        :minNum="1"
        :maxNum="showStock"
        @numChange="numChange"
      ></counter>
    </div>
    <div class="sku-button">
      <div class="button-shop-cart" @click="shopCartClick">
        <span>加入购物车</span>
      </div>
      <div class="button-buy" @click="buyClick">
        <span>立即购买</span>
      </div>
    </div>
  </div>
</template>

<script>
import Counter from "components/common/counter/Counter.vue";
export default {
  name: "",
  props: {
    skuInfo: {
      type: Object,
      default() {
        return {
          itemId: "1k6y6ss",
          defaultImg:
            "https://s11.mogucdn.com/mlcdn/c45406/170830_44h0871i7h5fa1fif5ll71jhhf926_640x960.jpg_128x999.jpg",
          defaultPrice: "¥45.0~¥50.0",
          totalStock: 18587,
          props: [
            {
              name: "颜色",
              pid: 1627207,
              values: [
                {
                  name: "灰色",
                  vid: 28334
                },
                {
                  name: "黑色",
                  vid: 28335
                }
              ]
            },
            {
              name: "尺码",
              pid: 20518,
              values: [
                {
                  name: "M",
                  vid: 28315
                },
                {
                  name: "L",
                  vid: 28316
                },
                {
                  name: "XL",
                  vid: 28317
                },
                {
                  name: "2XL",
                  vid: 28318
                }
              ]
            }
          ],
          skus: [
            {
              propPath: {
                "1627207": 28334,
                "20518": 28315
              },
              skuId: 4321514660827,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_37bai951lk4hhl39li58ab5i1k28c_800x800.jpg_128x999.jpg",
              stock: 913,
              price: 45
            },
            {
              propPath: {
                "1627207": 28334,
                "20518": 28316
              },
              skuId: 4321514660828,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_37bai951lk4hhl39li58ab5i1k28c_800x800.jpg_128x999.jpg",
              stock: 1100,
              price: 45
            },
            {
              propPath: {
                "1627207": 28334,
                "20518": 28317
              },
              skuId: 4321514660829,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_37bai951lk4hhl39li58ab5i1k28c_800x800.jpg_128x999.jpg",
              stock: 1256,
              price: 45
            },
            {
              propPath: {
                "1627207": 28334,
                "20518": 28318
              },
              skuId: 4321514660830,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_37bai951lk4hhl39li58ab5i1k28c_800x800.jpg_128x999.jpg",
              stock: 456,
              price: 45
            },
            {
              propPath: {
                "1627207": 28335,
                "20518": 28315
              },
              skuId: 4321514660832,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_415c22i851gg55g5lf9bekl2c9bdf_800x800.jpg_128x999.jpg",
              stock: 159,
              price: 50
            },
            {
              propPath: {
                "1627207": 28335,
                "20518": 28316
              },
              skuId: 4321514660833,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_415c22i851gg55g5lf9bekl2c9bdf_800x800.jpg_128x999.jpg",
              stock: 753,
              price: 50
            },
            {
              propPath: {
                "1627207": 28335,
                "20518": 28317
              },
              skuId: 4321514660834,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_415c22i851gg55g5lf9bekl2c9bdf_800x800.jpg_128x999.jpg",
              stock: 753,
              price: 50
            },
            {
              propPath: {
                "1627207": 28335,
                "20518": 28318
              },
              skuId: 4321514660835,
              image:
                "https://s5.mogucdn.com/mlcdn/c45406/170830_415c22i851gg55g5lf9bekl2c9bdf_800x800.jpg_128x999.jpg",
              stock: 789,
              price: 50
            }
          ]
        };
      }
    }
  },
  data() {
    return {
      selected: {},
      num: 1
    };
  },
  created() {
    for (let iterator of this.skuInfo.skus) {
      console.log(iterator);
    }
    // this.img = this.skuInfo.defaultImg;
    // this.price = this.skuInfo.defaultPrice;
    this.selected = {};
    for (let index = 0; index < this.skuInfo.props.length; index++) {
      let e = this.skuInfo.props[index];
      // 必须这样新增属性computed才能监听
      this.$set(this.selected, e.pid, {
        isValue: false,
        props: e.name,
        pid: e.pid,
        value: "",
        vid: ""
      });
    }
  },
  components: { Counter },
  computed: {
    showImage() {
      let image = this.skuInfo.defaultImg;
      let skus = this.filterSelected();
      skus.length != this.skuInfo.skus.length && (image = skus[0].image);
      return image;
    },
    showPrice() {
      let price = this.skuInfo.defaultPrice;
      let skus = this.filterSelected();
      skus.length == 1 && (price = "¥" + skus[0].price);
      return price;
    },
    showStock() {
      let stock = this.skuInfo.totalStock;
      let skus = this.filterSelected();
      stock = skus.reduce((sum, item) => {
        return parseInt(sum) + parseInt(item.stock);
      }, 0);
      return stock;
    },
    showSelected() {
      let str = "";
      if (this.isSelected()) {
        for (const key in this.selected) {
          const element = this.selected[key];
          str = element.value + " " + str;
        }
        str = "已选择: " + str;
      } else {
        for (const key in this.selected) {
          const element = this.selected[key];
          if (!element.isValue) {
            str = element.props + " " + str;
          }
        }
        str = "请选择: " + str;
      }
      this.$emit("showSelected", str);
      return str;
    }
  },
  methods: {
    /**
     * 重复代码封装
     */
    filterSelected() {
      // 筛选出已经选择的props和value
      let skus = this.skuInfo.skus;
      for (const key in this.selected) {
        const element = this.selected[key];
        if (element.isValue) {
          skus = skus.filter(item => {
            return item.propPath[element.pid] == element.vid;
          });
        }
      }
      return skus;
    },
    isSelected() {
      // sku是否全部选择完成
      let b = true;
      for (const key in this.selected) {
        const element = this.selected[key];
        if (!element.isValue) {
          b = false;
          break;
        }
      }
      return b;
    },
    /**
     * 事件
     */
    selectedValue(e) {
      // 点击value的事件
      // console.log(e);
      if (this.selected[e.pid]) {
        if (this.selected[e.pid].isValue) {
          if (this.selected[e.pid].vid == e.vid) {
            this.$set(this.selected, e.pid, {
              isValue: false,
              props: this.selected[e.pid].props,
              pid: this.selected[e.pid].pid,
              value: "",
              vid: ""
            });
          } else {
            this.$set(this.selected, e.pid, {
              isValue: true,
              props: this.selected[e.pid].props,
              pid: this.selected[e.pid].pid,
              value: e.value,
              vid: e.vid
            });
          }
        } else {
          this.$set(this.selected, e.pid, {
            isValue: true,
            props: this.selected[e.pid].props,
            pid: this.selected[e.pid].pid,
            value: e.value,
            vid: e.vid
          });
        }
        // this.$forceUpdate(); //强制刷新
      }
    },
    numChange(num) {
      // 计算器数字变化事件
      this.num = num;
    },
    shopCartClick() {
      // 加入购物车
      if (this.isSelected()) {
        this.$emit("shopCartClick", {
          selected: this.selected,
          num: this.num
        });
      } else {
        this.$toast.show("请选择商品规格", 1000);
      }
    },
    buyClick() {
      // 立即购买
      if (this.isSelected()) {
        this.$emit("buyClick", {
          selected: this.selected,
          num: this.num
        });
      } else {
        this.$toast.show("请选择商品规格", 1000);
      }
    }
  }
};
</script>

<style scoped>
.sku-ptions {
  background: #fff;
}
.sku-show {
  padding: 20px 10px 10px 100px;
  position: relative;
}
.show-img {
  position: absolute;
  left: 10px;
  bottom: 0;
}
.show-img img {
  width: 80px;
}
.show-price {
  color: #333;
  font-size: 20px;
  font-weight: 700;
}
.show-stock,
.show-selected {
  font-size: 12px;
  margin-top: 4px;
}
.sku-props-values {
  padding: 10px;
}
.sku-value {
  font-size: 12px;
  margin-top: 10px;
  list-style: none;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.sku-value li {
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 10px;
  padding: 6px 18px;
}
.sku-num {
  margin-bottom: 90px;
  padding: 10px;
}
.sku-num p {
  margin-bottom: 10px;
}
.sku-button {
  height: 50px;
  display: flex;
}
.button-shop-cart,
.button-buy {
  flex: 1;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-shop-cart {
  color: var(--color-tint);
  background-color: #ffe6e8;
}
.button-buy {
  color: #fff;
  background: var(--color-tint);
}
.active {
  color: var(--color-high-text) !important;
  border: 1px solid var(--color-tint) !important;
}
</style>
